<template>
  <!-- 试卷相关信息 -->
  <div class="create-exam-info">
    <!-- 试卷名 -->
    <div>
      <span>试卷名:</span>
      <n-input type="text" v-model:value="examData.title" size="large" placeholder="请输入试卷名" class="exam-name"
        maxlength="50" show-count clearable />
    </div>

    <div class="xz-date">
      <span style="min-width: 105px;">请选择考试班级:</span>
      <n-select v-model:value="examData.classId" style="width: 100%" multiple :options="selectOptions" />
    </div>



    <!-- 开始时间 -->
    <div class="xz-date">
      <span>开始时间:</span>
      <n-date-picker v-model:value="examData.starTime" type="datetime" default-time="00:00:00"
        :is-date-disabled="starDisselect" clearable />
    </div>

    <!-- 结束时间 -->
    <div class="xz-date">
      <span>截止时间:</span>
      <n-date-picker :disabled="disabled" v-model:value="examData.outTime" default-time="23:59:59" type="datetime"
        :is-date-disabled="outDisselect" clearable />
    </div>

    <!-- 限时间 :actions="['confirm']"只要确认按钮 -->
    <div class="xz-date">
      <span>考试限时:</span>
      <n-time-picker v-model:value="examData.timeLimit" :actions="['confirm']" default-time="20:00:00" />
    </div>

    <div class="xz-date">
      试卷满分: {{examData.fullMark}}
    </div>
  </div>
  <!-- {{ examData.topicArray }} -->

  <!-- {{ topicData }} -->
  <!-- examData.topicArray是一个存放题目id的数组 -->
  <n-transfer v-model:value="examData.topicArray" :options="options" style="height: 500px" />

</template>

<script setup>
import teacherHttp from "@/api/teacherHttp";
import { computed, onMounted, ref, toRaw, watch } from "vue";
import useUserStore from "@/stores/useUserStore";
const userStore = useUserStore()
//获取父组件数据
const props = defineProps(['examData'])
const examData = props.examData
//题库
const topicData = ref([])

//计算获取满分
const fullMark = computed(() => {
  let sum = 0;
  //循环题目的数组
  for (let i = 0; i < topicData.value.length; i++) {
    //循环选中数据的数组
    for (let j = 0; j < examData.topicArray.length; j++) {
      //判断id是否相同，相同则 sum的值加上选中题目的分值
      if (topicData.value[i].topicId == examData.topicArray[j]) {
        sum += topicData.value[i].score
      }
    }
  }
  return sum
})

// 监听 fullMark 的变化并更新 examData.fullMark
watch(fullMark, (newVal) => {
  examData.fullMark = newVal
});


//禁止选择时间 --如果开始时间是空的就禁止选择截止时间
const disabled = computed(() => {
  return examData.starTime == null ? true : false;
});
// 考试开始 和考试截至时间只能是当前时间之后的时间
function starDisselect(ts) {
  return ts < Date.now() - 86400000;
}
//考试结束时间，要比当前时间大
function outDisselect(ts) {
  return ts < examData.starTime;
}

//题库------------------------穿梭框

async function getTopicList() {
  teacherHttp.getTopicList(userStore.userInfo.userId).then((res) => {
    console.log("题库数据", res.data);
    topicData.value = res.data
  })
}
//选中的班级的数据
const selectClass = ref([])

const selectOptions = computed(() => {
  return classInfo.value.map(item => ({
    label: item.className,
    value: item.classId
  }));
})
//用来存储获取到的班级数据
const classInfo = ref([])
// 获取初始化数据班级的
function getClassList() {
  teacherHttp.getClassList(userStore.userInfo.userId).then((res) => {
    console.log("获取到班级信息", res);
    classInfo.value = res.data
    console.log("初始化班级", classInfo.value);
  })
}

//穿梭框内容
const options = computed(() => {
  //i是索引
  return topicData.value.map((v, i) => ({
    label: `【${v.type}】(${v.score}分)${v.title}`,
    value: v.topicId,
    disabled: ''
  }));
})

onMounted(() => {
  getTopicList()
  getClassList()
})

</script>

<style scoped>
/* 考试信息 */
.create-exam-info {
  padding: 20px;
  border: 1px rgb(149, 108, 79, 0.2) solid;
  border-radius: 10px;
  margin: 15px;
  display: flex;
  flex-direction: column;
}

/* 试卷名输入框 */
.exam-name {
  width: 60%;
  min-width: 300px;
}

/* 考试类型 */
.exam-type {
  margin-top: 10px;
}

/* 开展时间和结束时间*/
.xz-date {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* 文本距离右边输入框的距离 */
.create-exam-info span {
  margin-right: 10px;
}
</style>